<template>
	<view>
		<u-navbar title="我的订单" :autoBack="true"></u-navbar>
		<view class="container">
			<u-tabs :list="tabBars" class="tap_t" :current="tabIndex" :lineWidth="40" :lineHeight="2"
				:scrollable="false" activeStyle="color:#FF0000;font-size:14px;"
				inactiveStyle="color:#313131;font-size:14px;" lineColor="#FF0000" @click="changeTab">
			</u-tabs>
			<view style="padding: 30rpx;padding-top: 10rpx;" v-for="(item,index) in navList" :key="index"
				v-if="tabIndex == index">
				<view class="card" v-for="(list,listIndex) in item.orderList " :key="listIndex">
					<view class="card_top">
						<view style="display: flex;align-items: center;">
							<image style="width: 26rpx;height:26rpx;margin-right: 16rpx;"
								src="@/static/img/cate/order.png" mode=""></image>
							<view>
								{{list.orderid}}
							</view>
							<!-- <image style="width: 22rpx;height: 26rpx;margin-left: 20rpx;"
								src="/static/img/httpindex/goods/youjian.png" mode=""></image> -->
						</view>
						<view style="font-size: 24rpx;color: #999;">{{list.stateTip}}</view>
					</view>
					<view class="card_main">
						<view class="card_main_box" v-for="(productItem,index) in list.product_list"
							:key="productItem.id">
							<view class="card_main_box_content">
								<image :src="productItem.goods_ico" @tap="detail(productItem.product_id)"
									style="width:180rpx;height: 180rpx;border-radius: 12rpx;margin-right: 16rpx;"
									mode="" />
								<view style="width: calc(100% - 196rpx);">
									<view class="card_main_box_title">{{productItem.goodname}}</view>
									<view class="card_main_box_center">{{productItem.goods_introduct}}</view>
									<view style="display: flex;justify-content: space-between;">
										<view style="font-size: 30rpx;color: rgb(245, 84, 56);">
											<text style="font-size: 24rpx;zoom: 0.8;color: #999;width: 70rpx;">价格</text>
											<text>￥{{productItem.price}}</text>
										</view>
										<view style="font-size: 26rpx;">X{{productItem.num}}</view>
									</view>
								</view>
							</view>

							<view class="order-bottom d-flex">
								<view class="order-bottom-status" v-if="productItem.status == 10"
									@tap="conOrder(productItem.id)">确认收货</view>
							</view>
						</view>

						<view style="display: flex;justify-content: flex-end;" v-if="list.status >= 10">
							<view class="order-bottom d-flex">
								<view class="d-flex">
									<view class="order-bottom-status" style="background: rgba(0, 0, 0, .5);"
										@tap="delOrder(list.id)" v-if="list.status == 20">删除订单</view>

									<!-- <view class="order-bottom-status " style="color: #29ad97;margin-left: 250rpx;"
										v-if="list.status == 20">已完成</view> -->
								</view>
							</view>
						</view>
					</view>

				</view>
				<uni-load-more :status="navList[tabCurrentIndex].loadingType"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				// tag:'',
				tabCurrentIndex: 0,
				navList: [{
						state: -1,
						text: '全部',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					},
					{
						state: 1,
						text: '待发货',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					},
					{
						state: 10,
						text: '待收货',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					},
					{
						state: 20,
						text: '已完成',
						loadingType: 'more',
						page: 1,
						totalCount: 0,
						orderList: []
					}
				],
				goodsList: [],
				tabIndex: 0,
				tabBars: [{
						name: '全部',
					},

					{
						name: '待发货',
					},
					{
						name: '待收货',
					},
					{
						name: '已完成',
					}
				]
			};
		},
		onLoad(options) {
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			let status = options.status
			this.navList.forEach((item, index) => {
				if (item.state == status) {
					this.tabIndex = index
					this.tabCurrentIndex = index
				}
			})
			this.loadData()

		},
		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},
		// 页面生命周期，下拉刷新后触发
		onPullDownRefresh() {
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			this.navList[this.tabCurrentIndex].page = 1
			this.navList[this.tabCurrentIndex].orderList = []
			this.loadData('refresh')
			// 停止下拉刷新
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 500)
		},

		onReachBottom() {
			this.loadData()
		},

		methods: {

			changeTab(item) {
				let index = item.index
				if (this.tabIndex == index) {
					return
				}
				this.tabIndex = index
				this.tabCurrentIndex = index

				if (this.navList[index].orderList.length == 0) {
					this.loadData()
				}
			},
			onChangeTab(e) {
				this.changeTab(e.detail.current)
			},
			toggle(type, index) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
				this.goodsList = this.navList[this.tabIndex].orderList[index].product_list
			},
			// 
			async orders(status) {
				let dataObj = {
					token: uni.getStorageSync('token'),
					page: this.navList[this.tabCurrentIndex].page,
					status: status
				}
				let res = await this.$myRequest({
					url: '/orders',
					methods: 'POST',
					data: dataObj
				})

				let ndata = res.data.data.list
				if (ndata.length > 0) {
					ndata.forEach(item => {
						let statusObj = this.orderStateExp(item.status)
						Object.assign(item, statusObj)
					})
				}
				let count = res.data.totalCount
				this.navList[this.tabCurrentIndex].totalCount = count
				if (this.navList[this.tabCurrentIndex].page === 1) {
					this.navList[this.tabCurrentIndex].orderList = ndata
					if (ndata.length > 0) {
						this.navList[this.tabCurrentIndex].page = this.navList[this.tabCurrentIndex].page + 1
					}
				} else {
					if (ndata.length > 0) {
						this.navList[this.tabCurrentIndex].orderList = [...this.navList[this.tabCurrentIndex]
							.orderList, ...
							ndata
						];
						this.navList[this.tabCurrentIndex].page = this.navList[this.tabCurrentIndex].page + 1;
					}
				}
				this.navList[this.tabCurrentIndex].loadingType = this.navList[this.tabCurrentIndex].orderList.length <
					this.navList[this.tabCurrentIndex].totalCount ? 'more' : 'nomore'
			},

			orderStateExp(state) {
				let stateTip = '',
					stateTipColor = '#29ad97'
				switch (state) {

					case 1:
						stateTip = '待发货';
						break;
					case 10:
						stateTip = '待收货';
						break;
					case 20:
						stateTip = '已完成';
						stateTipColor = '#909399'
						break;
				}
				return {
					stateTip: stateTip,
					stateTipColor: stateTipColor
				}
			},

			// 
			async loadData(type = 'add') {
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let status = navItem.state;
				if (navItem.loadingType === 'nomore' && type == 'add') {
					return;
				}
				navItem.loadingType = 'loading';
				this.orders(status)
				setTimeout(() => {
					this.$set(navItem, 'loaded', true)
				}, 600)
			},

			//取消订单
			async canOrder(id) {
				let res = await this.$myRequest({
					url: '/canOrder',
					methods: "POST",
					data: {
						id: id,
						token: uni.getStorageSync('token')
					},
				})

				uni.showToast({
					title: '取消成功',
					icon: 'none'
				})
				setTimeout(() => {
					this.initCurrentOrders()
					this.navList[1].orderList = []
					this.navList[1].page = 1;
					this.navList[1].totalCount = 0;
					this.navList[1].loadingType = 'more'
				}, 1000)
			},
			//去支付
			async goPay(tag) {
				let res = await this.$myRequest({
					url: '/getOrder',
					methods: "POST",
					data: {
						tag: tag,
						token: uni.getStorageSync('token')
					},
				})

				if (res.data.status == 1) {
					// this.$toast('创建新订单');
					uni.showToast({
						title: '创建新订单',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/cart/order?tag=' + tag
						})
					}, 1000)
				} else {
					// this.$toast(res.msg);
					uni.showToast({
						title: '创建失败',
						icon: 'none'
					})
				}
			},

			//确认订单
			async conOrder(id) {
				let res = await this.$myRequest({
					url: '/conOrder',
					methods: "POST",
					data: {
						id: id,
						token: uni.getStorageSync('token')
					},
				})

				this.$api.msg(res.data.msg);
				this.initCurrentOrders()
				setTimeout(() => {
					uni.redirectTo({
						url: "/pages/user/user-orders?status=20"
					})
				}, 1000)

			},
			// 删除订单
			async delOrder(id) {
				let res = await this.$myRequest({
					url: '/delOrder',
					methods: "POST",
					data: {
						id: id,
						token: uni.getStorageSync('token')
					},
				})

				uni.showToast({
					title: '删除成功',
					icon: 'none'
				})
				setTimeout(() => {
					this.initCurrentOrders()

				}, 1000)
			},

			initCurrentOrders() {
				this.navList[this.tabCurrentIndex].page = 1
				this.loadData('refresh')
				this.navList[0].orderList = []
				this.navList[0].page = 1;
				this.navList[0].totalCount = 0;
				this.navList[0].loadingType = 'more'
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},
		},
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.container {
		position: relative;
		/* #ifdef APP-PLUS */
		top: 160rpx;
		/* #endif */

		/* #ifdef H5 */
		top: 100rpx;
		/* #endif */
	}

	.tap_t {
		font-size: 26rpx;
		padding: 0 12rpx;
		background: #fff;
	}

	.card {
		background: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.card_top {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		align-items: center;
	}

	.card_main {
		margin-top: 26rpx;
		/* border-bottom: 1px solid rgb(218, 218, 218); */
	}

	.card_main_box {
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		padding-bottom: 24rpx;
	}

	.card_main_box_content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.card_main_box_center {
		width: 98%;
		padding: 6rpx;
		color: #999;
		background-color: #f6f6f6;
		font-size: 24rpx;
		border-radius: 8rpx;
		/* text-align: center; */
		margin-bottom: 12rpx;

		overflow: hidden; // 溢出隐藏
		white-space: nowrap; // 强制一行
		text-overflow: ellipsis; // 文字溢出显示省略号
	}

	.card_main_box_title {
		font-size: 28rpx;
		overflow: hidden;
		margin-bottom: 12rpx;
		text-overflow: ellipsis;
		display: -webkit-box;
		width: 100%;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.detail_c {
		padding: 10rpx 32rpx;
		font-size: 24rpx;
		border: 1px solid #000;
		border-radius: 100px;
		margin-left: 30rpx;
		margin-top: 24rpx;
	}

	.scroll {
		background-color: white;
		width: 100%;
		height: 85rpx;
		position: fixed;
		// top: 88upx;
		z-index: 99;

		.scroll-item {
			margin-top: 30rpx;
			font-size: 30rpx;
		}
	}

	.main-text-color {
		color: #29ad97;
		border-bottom: 3rpx solid #29ad97;
		height: 50rpx;
	}

	.order {
		margin: 0 auto;
		width: 96%;
		height: 100%;
		background-color: white;
		border-radius: 20rpx;
		margin-bottom: 20rpx;

		.order-status {
			font-size: 28rpx;
		}

		.order-products {
			.order-list-image {
				width: 120rpx;
				height: 130rpx;
				margin: 20rpx;
			}

			.item {
				text-align: right;
				color: #868788;

			}

			.order-list-title {
				font-weight: 600;
				margin-top: 20rpx;
				width: 300rpx;
				white-space: nowrap; //单词在空格处：不换行
				overflow: hidden; //内容溢出的话：隐藏
				text-overflow: ellipsis; //溢出的文本用省略号代替
			}

			.Sold {
				width: 400rpx;
				color: #868788;
			}

			.fullPrice {
				text-align: right;
				// font-size: 30rpx;
			}

			.price {
				text-align: right;
			}
		}
	}

	.order-bottom {
		margin-top: 6px;
		display: flex;
		justify-content: flex-end;
	}

	.order-bottom-status {
		text-align: center;
		color: white;
		border-radius: 30rpx;
		background-color: #ff0000;
		font-size: 26rpx;
		padding: 8rpx 20rpx;
	}

	.color {
		color: #29ad97;
	}
</style>